<template>
  <el-header class="layout-header">
    <div class="title">{{ title }}</div>
    <div class="right">
      <el-button icon="FullScreen" circle @click="handleFullScreen" title="全屏"></el-button>
      <el-button icon="Bell" circle title="消息"></el-button>
      <el-dropdown>
        <span class="el-dropdown-link">
          <!-- <el-avatar size="small" icon="User" /> -->
          <el-avatar :src="userInfo.avatar" :icon="'User'" />

          <span>{{ userInfo.username }}</span>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <el-avatar size="small" icon="User" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <router-link to="/profile"><el-link>个人中心</el-link></router-link>
            </el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button icon="Setting" circle @click="handleSetting" title="系统设置"></el-button>
      <SettingDrawer v-model="visible" />
    </div>
  </el-header>
</template>
<script setup>
  import { useUserStore } from '@/stores/userStore'
  import SettingDrawer from '../setting-drawer/index.vue'
  import { storeToRefs } from 'pinia'
  defineProps({
    title: {
      type: String,
      default: '博客管理系统'
    }
  })
  const visible = ref(false)
  const userStore = useUserStore()
  const router = useRouter()
  const route = useRoute()
  const { userInfo } = storeToRefs(userStore)
  const handleFullScreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen()
    } else {
      document.exitFullscreen?.()
    }
  }
  const handleSetting = () => {
    // 处理设置按钮点击事件
    visible.value = true
  }

  const logout = () => {
    // 退出登录
    userStore.$reset() // 重置用户信息
    // 清除用户信息
    // 跳转到登录页面
    console.log('logout', route.fullPath)
    // 如果有重定向的路由，则跳转到登录页面并携带重定向信息
    router.push({
      path: '/login',
      query: { redirect: route.fullPath }
    })
  }
</script>
<style lang="scss" scoped>
  .layout-header {
    height: $layout-header-height;
    background-color: $layout-header-background;
    color: $layout-header-text-color;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      font-weight: bold;
    }
    .right {
      display: flex;
      align-items: center;
      .el-button {
        background-color: transparent;
        border: none;
        width: auto;
        color: $layout-header-text-color;
        font-size: 20px;
        &:hover {
          // color: $layout-header-hover-text-color;
        }
      }
      .el-dropdown {
        cursor: pointer;
        color: $layout-header-text-color;
        margin: 0 12px;
        .el-icon--right {
          margin-left: 5px;
        }
        .el-dropdown-link {
          display: flex;
          align-items: center;
          gap: 5px;
          &:focus-visible {
            outline: none;
          }
        }
      }
    }
  }
</style>
